<!--<button (click)="show = !show">Toggle All</button>-->

<ng-container *ngIf="show">
  <div [formGroup]="tooltipSettings" style="text-transform: capitalize">
    <div *ngFor="let option of tooltipTypes" class="flex items-center">
      <input type="radio" formControlName="type" name="type" [value]="option" class="mr-4" />
      {{ option }}
    </div>

    <hr />

    <div *ngFor="let option of tooltipPositions" class="flex items-center">
      <input type="radio" formControlName="position" name="position" [value]="option" class="mr-4" />{{ option }}
    </div>

    <hr />

    <div *ngFor="let option of tooltipAlignments" class="flex items-center">
      <input type="radio" formControlName="alignment" name="alignment" [value]="option.value" class="mr-4" />{{
        option.label
      }}
    </div>

    <div class="btn-container">
      <button
        class="btn btn-outline-primary"
        tippy="Helpful Message"
        [placement]="tooltipPosition"
        [variation]="tooltipType"
      >
        I have a tooltip
      </button>
    </div>
  </div>

  <hr />

  <h6>Default variation</h6>

  <div class="btn-container">
    <button tippy="Default tooltip" class="btn btn-outline-secondary">Click Me</button>
  </div>

  <hr />

  <div>
    <h6>Custom Template</h6>

    <div class="btn-container" id="custom-template">
      <button [tippy]="tpl" variation="popper" class="btn btn-outline-secondary" #tippy2="tippy">Click Me</button>
      Visible: {{ tippy2.isVisible }}
    </div>

    <ng-template #tpl let-hide>
      <div *ngFor="let item of tooltipPositions" class="positions">
        {{ item }}
      </div>
    </ng-template>

    <hr />

    <h6>ng-container</h6>
    <div class="btn-container">
      <button [tippy]="tpl2" variation="popper" class="btn btn-outline-secondary">Click Me</button>
    </div>

    <ng-template #tpl2>
      <ng-container>
        <div>Hello</div>
      </ng-container>
    </ng-template>
  </div>

  <hr />

  <div id="custom-component">
    <h6>Custom Component</h6>

    <div class="btn-container">
      <button class="btn btn-outline-danger" [tippy]="comp" variation="popper" (visible)="handleStatus($event)">
        Open component
      </button>
    </div>
  </div>

  <hr />

  <div id="manual-trigger" class="block">
    <h6>Manual Trigger</h6>

    <div class="btn-container items-center">
      <p tippy="Helpful Message" trigger="manual" #tippy="tippy" class="mr-4">Click open to see me</p>

      <button (click)="tippy.show()" class="btn btn-outline-dark">Open</button>
      <button (click)="tippy.hide()" class="btn btn-outline-dark">Close</button>
    </div>
  </div>

  <hr />

  <div id="lazy">
    <h6>Lazy</h6>
    <div style="height: 300px; overflow-y: auto">
      <div *ngFor="let item of items" [tippy]="item.label" [lazy]="true">{{ item.label }}</div>
    </div>
  </div>

  <hr />

  <div id="disabled">
    <h6>Disabled</h6>

    <div class="btn-container">
      <button [isEnabled]="!isDisabled" tippy="Tooltip" class="btn btn-outline-dark">Element</button>
    </div>

    <button (click)="toggle()" class="btn btn-outline-primary btn-sm">{{ isDisabled ? "Enable" : "Disable" }}</button>
  </div>

  <hr />

  <div id="text-overflow">
    <h6>Text Overflow</h6>

    <p>Start with overflow and change to not overflow</p>
    <div style="max-width: 100px;" class="overflow-hidden flex">
      <p class="ellipsis" [tippy]="text" placement="right" [onlyTextOverflow]="true">
        {{ text }}
      </p>
    </div>

    <button (click)="changeContent()" class="btn btn-outline-info btn-sm mt-2">Change content</button>

    <hr />

    <p>Start with not overflow and change to overflow</p>
    <div [style.maxWidth.px]="maxWidth" class="overflow-hidden flex">
      <p class="ellipsis" [tippy]="text" placement="right" [onlyTextOverflow]="true">
        {{ text }}
      </p>
    </div>

    <button (click)="maxWidth = 100" class="btn btn-outline-info btn-sm mt-2">Change width</button>
  </div>

  <hr />

  <div id="service">
    <h6>Using the Service</h6>

    <div class="btn-container">
      <button class="btn btn-outline-dark" (click)="useService(host)" #host>Text</button>
      <button class="btn btn-outline-dark" (click)="useServiceComponent(host2)" #host2>Component</button>
    </div>
  </div>

  <ng-template #contextMenu let-hide let-item="data">
    <ul class="list-group list-group-flush">
      <li class="list-group-item" (click)="copy(item); hide()">Copy</li>
      <li class="list-group-item" (click)="duplicate(item); hide()">Duplicate</li>
    </ul>
  </ng-template>

  <div id="context-menu">
    <h6>Context menu</h6>

    <ul class="list-group">
      <li class="list-group-item" *ngFor="let item of list" [tippy]="contextMenu" [data]="item" variation="contextMenu">
        {{ item.label }}
      </li>
    </ul>
  </div>

  <hr />

  <div>
    <h6>Use host width</h6>
    <div class="flex">
      <input
        style="flex: 1; max-width: 600px"
        type="text"
        placeholder="host width"
        tippy="hello world"
        variation="menu"
        useHostWidth="true"
      />
    </div>
  </div>

  <hr />

  <div>
    <h6>Menu</h6>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" [tippy]="one" variation="menu">
        Dropdown button
      </button>

      <ng-template #one>
        <div>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#" [tippy]="two" placement="right" variation="menu" trigger="mouseenter"
            >Another action</a
          >
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </ng-template>

      <ng-template #two>
        <div>
          <a class="dropdown-item" href="#">Action 2</a>
          <a class="dropdown-item" href="#">Another action 2</a>
          <a class="dropdown-item" href="#" [tippy]="three" placement="right" variation="menu" trigger="mouseenter"
            >Something else here 2</a
          >
        </div>
      </ng-template>

      <ng-template #three>
        <div>
          <a class="dropdown-item" href="#">Action 3</a>
          <a class="dropdown-item" href="#">Another action 3</a>
          <a class="dropdown-item" href="#">Something else here 3</a>
        </div>
      </ng-template>
    </div>
  </div>
</ng-container>
